body {
    margin: 0;
    display: flex;
    height: 100vh; /* 设置页面高度 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

.sidebar { /*导航*/
    width: 20%; /* 左侧导航宽度为页面的五分之一 */
    background: linear-gradient(135deg, #cfe1f5, #eaf1fb);; /* 浅蓝白渐变 */
    color: white;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.content { /*主体内容*/
    width: 80%; /* 主内容区宽度为页面的五分之四 */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    background: linear-gradient(to right, #99CCff, #ffffff);
    position: relative;
}

.hidden {
transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    display: none; /* 隐藏导航 */
}

.button1 { /*导航中的按钮样式*/
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start;
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    border: none; /* 不显示边框 */
    background-color: transparent; /* 背景颜色透明 */
    color: rgb(128, 128, 128); /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    border-radius: 5px; /* 圆角半径 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    width: 19.5vw;

}

a {
    text-decoration: none; /* 去掉下划线 */

}

.button1-icon {
    width: 30px; /* 图标宽度 */
    margin-right: 10px; /* 图标与文本之间的间距 */
}


.button1:hover {
    background-color: #d3d3d3; /* 悬停时背景色为浅灰色 */
    color: #336699; /* 悬停时文本颜色变为蓝色 */
    font-weight: bold;

}


.button4 { /*隐藏导航按钮样式*/
    width: 30px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    background-color: #d3d3d3; /* 按钮背景色 */
    border: none; /* 去掉边框 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer; /* 鼠标悬停时变成手型 */
    transition: background-color 0.3s, color 0.3s;
}

.button4:hover {
    background-color: rgb(128, 128, 128);
}

.button4-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
}

.logo { /*导航左上角的深蓝色方块*/
    left: 0;
    width: 60px; /* 方块的宽度 */
    height: 60px; /* 方块的高度 */
    border-radius: 10px; /* 圆角 */
    margin-right: 10px; /* 方块和标题之间的间距 */
}

.title {
    position: absolute;
    font-size: 20px;
    color: #336699; /* 标题字体大小 */
    font-weight: bold;
    display: inline;
    top: 5px;
    left: 70px;
}

.underline {/*导航中下划线样式*/
    width: 100%; /* 下划线全宽 */
    height: 2px; /* 下划线高度 */
    background-color: rgb(128, 128, 128); /* 灰色下划线 */
}

/* 外部边框容器 */
.outer-box {
    margin-top: 10%;
    border-radius: 15px;
    padding: 20px;
    background-color: #f1f6fc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;  /* 让子元素垂直排列 */
    justify-content: center;
    align-items: center;
    height: 60%;
}

/* 错误提示框的样式 */
.error-box {
    background-color: #f8d7da; /* 淡红色背景，表示错误 */
    border: 1px solid #f5c6cb; /* 边框颜色稍深 */
    color: #721c24; /* 深红色字体 */
    padding: 15px; /* 内边距 */
    margin-bottom: 20px; /* 与其他内容的间距 */
    border-radius: 5px; /* 圆角边框 */
    font-size: 14px; /* 字体大小 */
    text-align: center; /* 居中对齐 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.error-box p {
    margin: 0; /* 移除段落的默认外边距 */
}

/* 身份验证框 */
.verification-box {
    background-color: #d2e9fb;
    border-radius: 10px;
    padding: 40px;
    width: 400px;
    text-align: center;
    border: 2px dashed #0578b9; /* 虚线边框 */
    height: 300px;
    justify-content: center;
    align-items: center
}

/* 头部图标和标题 */
.verification-header {
    margin-bottom: 30px;
}

.identity-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

h2 {
    font-size: 15px;
    color: #0071bc;
}

/* 输入框组 */
.input-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;  /* 让label和输入框垂直居中 */
}

.input-group label {
    display: block;
    font-size: 15px;
    color: #0066cc;
    margin-bottom: 5px;
    width: 80px; /* 根据需要调整宽度 */
}

/* 输入框容器 */
.input-wrapper {
    display: flex;
    align-items: center;
    background-color: white;
    border: 2px solid #0578b9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    width: 60%;
}

.input-wrapper img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.input-wrapper input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    background: none;
    padding: 5px;
}

.input-wrapper input::placeholder {
    color: #868887;
}

.confirmdiv{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 确认按钮 */
.confirm-btn {
    width: 50%;
    padding: 12px;
    background-color: #0578b9;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}

.confirm-btn:hover {
    background-color: #005bb5;
}

/* 提示信息 */
.verification-message {
    margin-top: 20px;
    font-size: 14px;
    color: #4b4b4b;
    text-align: center;
    margin-bottom: 0px;
}

#message-box {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    z-index: 1000;
    display: none;
}

#message-box.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#message-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 消息框和错误框的淡出效果 */
.messages, .error-box {
    transition: opacity 1s ease-out;
}

.messages.hide, .error-box.hide {
    opacity: 0;
    pointer-events: none;  /* 防止用户在隐藏过程中点击 */
}